<!--
 * @Author: anshengtyp
 * @Date: 2023-12-06 15:53:31
 * @LastEditTime: 2023-12-14 09:06:38
 * @LastEditors: anshengtyp
 * @Description:
-->
<template>
  <div class="app-container home">
    <div class="top-left">
      <deptTaskCount :dept="allDeptList"></deptTaskCount>
    </div>
    <div class="top-right">
      <taskPopulation></taskPopulation>
    </div>
    <div class="bottom-left">
      <deptTaskComplete :dept="allDeptList"></deptTaskComplete>
    </div>
    <div class="bottom-left">
      <deferredTaskCount :dept="allDeptList"></deferredTaskCount>
    </div>
  </div>
</template>

<script>

import { getInfo } from "@/api/login";
import deferredTaskCount from "./components/deferredTaskCount.vue";
import deptTaskComplete from "./components/deptTaskComplete.vue";
import deptTaskCount from "./components/deptTaskCount.vue";
import taskPopulation from "./components/taskPopulation.vue";
import { listDept } from "@/api/system/dept";
export default {
  name: "Index",
  components: {
    deferredTaskCount,
    deptTaskComplete,
    deptTaskCount,
    taskPopulation,
  },
  data() {
    return {
      // 版本号
      version: "3.8.6",
      allDeptList: []
    };
  },
  created() {
    this.getAlldeptList();
    // this.getUser();
  },
  methods: {
    async getAlldeptList() {
      const res = await listDept();
      this.allDeptList = res.data;
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    getUser() {
      getInfo().then(res => {
        this.$store.state.userInfo.userName = res.user.userName
        this.$store.state.userInfo.userRole = res.user.nickName
        this.$store.state.userInfo.userRoleKeyList = res.roles
      })
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  background-color: #fff;
  height: 100%;
  display: grid;
  grid-auto-flow: row dense;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 50px 200px;
}
</style>

